<template>
  <div class="admin-layout">
    <div class="main-header">
      <template v-for="(el,index) in adminFlowBar">
        <adminFlow :key="index" :adminFlowBar="el"></adminFlow>
      </template>
    </div>
    <div class="main-body">
      <div class="d-flex justify-content-between">
        <div>
          <div class="h4">用户日志</div>
          <div class="overflow-hidden" style="height: 300px">
            <vue-seamless-scroll
                :data="warningData"
                :class-option="classOption">
              <div class="rows" v-for="(item, index) in warningData" :key="index">
                <div class="col" :style="`color: ${item.color}`">
                  <span class="iconfont icon-jinggao_o"></span>
                  <span>{{ item.info }}</span>
                </div>
              </div>
            </vue-seamless-scroll>
          </div>
        </div>
        <div class="">
          <div id="myChart-contest" style="width: 450px;height: 350px;background-color: white"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import adminFlow from "../../../components/adminComponents/adminFlow";
import admin from "../../../api/admin";
import vueSeamlessScroll from 'vue-seamless-scroll'

export default {
  name: "index",
  data() {
    return {
      adminFlowBar: [],
      classOption: {
        step: 0.5, // 数值越大速度滚动越快
        limitMoveNum: 1, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 20, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 2000
      }, warningData: [{
        info: '有人员进入危险区域',
        color: '#fcad9f'
      }]
    }
  },
  components: {
    adminFlow,
    vueSeamlessScroll
  },
  mounted() {
    let year = []
    for (let i = 2022; i > 2022 - 5; i--) {
      year.push(i)
    }
    // 用户访问人数
    this.GetRequestNum()
    // 竞赛数量
    this.GetContestInfoNum()
    // 报名数量
    this.GetApplyInfoNum()
    // 读取日志
    this.ReadLogInfo()
    admin.GetGenre({collegeName: this.$store.getters["userStore/userInfo"].collegeName}).then(r => {
      let data = []
      r.data.data.c.forEach(v => {
        data.push({
          value: v.count,
          name: v._id
        })
      })

      this.myChats({
        title: {
          text: '竞赛类别',
          subtext: '',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '竞赛类别',
            type: 'pie',
            radius: '50%',
            data:data,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }, "myChart-contest")
    })

  },
  methods: {

    ReadLogInfo() {
      admin.ReadLogInfo().then(r => {
        this.warningData = r.data.data.log
      })
    },

    GetApplyInfoNum() {
      admin.GetApplyInfoNum({collegeName: this.$store.getters["userStore/userInfo"].collegeName}).then(r => {
        if (r.data.data.count !== 0) {
          this.adminFlowBar.push({
            bgColor: 'background-color: #fcad9f',
            style: 'el-icon-medal',
            color: 'color:white;font-size:32px',
            count: r.data.data.count,
            title: '累计报名人数'
          })
        }
      })
    },


    GetContestInfoNum() {
      admin.GetContestInfo({collegeName: this.$store.getters["userStore/userInfo"].collegeName}).then(r => {
        if (r.data.data.count !== 0) {
          this.adminFlowBar.push({
            bgColor: 'background-color: #a993fa',
            style: 'el-icon-medal',
            color: 'color:white;font-size:32px',
            count: r.data.data.count,
            title: '累计竞赛数量'
          })
        }
      })
    },

    GetRequestNum() {
      admin.GetRequestNum().then(r => {
        this.adminFlowBar.push({
          bgColor: 'background-color: #428efc',
          style: 'el-icon-edit-outline',
          color: 'color:white;font-size:32px',
          count: r.data.data.num,
          title: '累计访问次数'
        })
      })
    },

    myChats(option, el) {
      // 基于准备好的dom，初始化echarts实例
      let myChartPeople = this.$echarts.init(document.getElementById(el))
      // 绘制图表
      myChartPeople.setOption(option);
    }
  }
}
</script>

<style scoped>
.main-header {
  display: flex;
  justify-content: space-around;
}

.contest {
  display: flex;
  justify-content: space-around;
}

.admin-layout > div {
  margin-top: 20px;
}
</style>